<template>
  <!-- 未收原因分析 -->
  <div>
    <Card>
      <el-form :model="queryParams">
        <el-row>
          <el-col :span="6">
            <el-form-item prop="aaaa" label="">
              <Cascader change-on-select :data="organizationList" v-model="queryParams.aaaa" style="width: 100%;"
                placeholder="请选择机构" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="cccc" label="">
              <el-select v-model="queryParams.cccc" clearable filterable placeholder="续收组" style="width: 100%;">
                <el-option v-for="item in reagentCodeListZ" :key="item.key" :value="item.key">
                  {{ item.value }}-{{ item.key }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="eeee" label="">
              <el-select v-model="queryParams.eeee" clearable filterable placeholder="续收专员" style="width: 100%;">
                <el-option v-for="item in reagentCodeListM" :key="item.key" :value="item.key">
                  {{ item.value }}-{{ item.key }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="eeee" label="">
              <el-date-picker v-model="queryParams.eeee" style="width: 100%;" :editable="false" type="month"
                format="yyyy-MM" value-format="yyyy-MM" placeholder="应交年月" size="small" class="item-width">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="dddd" label="">
              <el-select v-model="queryParams.dddd" clearable filterable placeholder="交次" style="width: 100%;">
                <el-option v-for="item in ddddList" :key="item.key" :value="item.key">
                  {{ item.value }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="ffff" label="">
              <el-select v-model="queryParams.ffff" clearable filterable placeholder="保单类型" style="width: 100%;">
                <el-option v-for="item in ffffList" :key="item.key" :value="item.key">
                  {{ item.value }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="">
              <div style="display: inline-block;float: right;">
                <el-button type="primary" size="mini">查询
                </el-button>
                <el-button type="info" plain size="mini">重置
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Card>
    <Card style="margin-top: 20px;">
      <el-table :data="tableList" style="width: 100%;">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column width="110" label="统计月份" prop="aaaa" align="center" />
        <el-table-column width="110" label="管理机构" prop="bbbb" align="center" />
        <el-table-column width="110" label="续收组经理" prop="dddd" align="center" />
        <el-table-column label="续收员" prop="cccc" align="center" />
        <el-table-column width="110" label="有效未收保费" prop="eeee" align="center" />
        <el-table-column width="110" label="失效保费" prop="ffff" align="center" />
        <el-table-column label="失效件数" prop="gggg" align="center" />
        <el-table-column label="退保保费" prop="hhhh" align="center" />
        <el-table-column label="退保件数" prop="iiii" align="center" />

        <!-- <el-table-column label="公司原因" align="center">
          <el-table-column width="120" label="自/互保件(保费)" prop="jjjj" align="center" />
          <el-table-column width="120" label="自/互保件(件数)" prop="kkkk" align="center" />
          <el-table-column width="110" label="不满意业务员(保费)" prop="llll" align="center" />

          <el-table-column width="110" label="不满意业务员(件数)" prop="llll" align="center" />
          <el-table-column width="110" label="产品不理想(保费)" prop="llll" align="center" />
          <el-table-column width="110" label="产品不理想(件数)" prop="llll" align="center" />
          <el-table-column width="110" label="服务不满意(保费)" prop="llll" align="center" />
          <el-table-column width="110" label="服务不满意(件数)" prop="llll" align="center" />
          <el-table-column width="110" label="对公司不信任(保费)" prop="llll" align="center" />
          <el-table-column width="110" label="对公司不信任(件数)" prop="llll" align="center" />
          <el-table-column width="110" label="同业竞争(保费)" prop="llll" align="center" />
          <el-table-column width="110" label="同业竞争(件数)" prop="llll" align="center" />
          <el-table-column width="110" label="对公贷款单(保费)" prop="llll" align="center" />
          <el-table-column width="110" label="对公贷款单(件数)" prop="llll" align="center" />
          <el-table-column width="110" label="考核件(保费)" prop="llll" align="center" />
          <el-table-column width="110" label="考核件(件数)" prop="llll" align="center" />
        </el-table-column> -->

        <!-- <el-table-column label="公司原因" align="center">
          <el-table-column width="120" label="自/互保件(保费)" prop="jjjj" align="center" />
        </el-table-column> -->
        <!-- <el-table-column width="110" label="服务完成次数" prop="mmmm" align="center" /> -->
      </el-table>
      <pagination :total="tableList.length" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </Card>
  </div>
</template>
<script>
export default {
  name: "NonCollectionBy",
  data() {
    return {
      queryParams: {},
      organizationList: [],
      ddddList: [{ key: "1", value: "全部" },
      { key: "2", value: "二次" },
      { key: "3", value: "三次" },
      { key: "4", value: "四次及以上" },],
      reagentCodeListZ: [{
        "value": "奚云峰组",
        "key": "100003"
      },
      {
        "value": "黄睿肃组",
        "key": "100004"
      },
      {
        "value": "虚拟组",
        "key": "100023"
      },
      {
        "value": "王sm组",
        "key": "100009"
      },],
      ggggList: [{
        "value": "已交",
        "key": "1"
      }, {
        "value": "未交",
        "key": "2"
      },],
      ffffList: [{
        "value": "在职单",
        "key": "1"
      }, {
        "value": "孤儿单",
        "key": "2"
      }, {
        "value": "全部",
        "key": "3"
      },],
      tableList: [{
        aaaa: '2023-07', bbbb: '无锡分公司1', cccc: '左思雨',
        dddd: '田慕雨', eeee: '1200', ffff: '1120',
        gggg: '14', hhhh: '1150', iiii: '20', jjjj: '1250', kkkk: '50', llll: '5', mmmm: '120',
      }, {
        aaaa: '2023-07', bbbb: '无锡分公司2', cccc: '时林',
        dddd: '田慕雨', eeee: '4500', ffff: '1020',
        gggg: '17', hhhh: '1820', iiii: '20', jjjj: '1870', kkkk: '14', llll: '100', mmmm: '120',
      }, {
        aaaa: '2023-07', bbbb: '无锡分公司3', cccc: '阎华雯',
        dddd: '田慕雨', eeee: '5600', ffff: '1754',
        gggg: '20', hhhh: '1730', iiii: '20', jjjj: '1780', kkkk: '35', llll: '14', mmmm: '120',
      }, {
        aaaa: '2023-07', bbbb: '无锡分公司4', cccc: '韩超',
        dddd: '田慕雨', eeee: '4566', ffff: '1680',
        gggg: '17', hhhh: '1940', iiii: '20', jjjj: '1990', kkkk: '15', llll: '16', mmmm: '120',
      }, {
        aaaa: '2023-07', bbbb: '无锡分公司1', cccc: '李瑞环',
        dddd: '田慕雨', eeee: '1200', ffff: '1120',
        gggg: '14', hhhh: '1150', iiii: '20', jjjj: '1250', kkkk: '26', llll: '5', mmmm: '120',
      }, {
        aaaa: '2023-07', bbbb: '无锡分公司3', cccc: '李羿潼',
        dddd: '田慕雨', eeee: '5600', ffff: '1754',
        gggg: '20', hhhh: '1730', iiii: '20', jjjj: '1780', kkkk: '18', llll: '14', mmmm: '120',
      }, {
        aaaa: '2023-07', bbbb: '无锡分公司3', cccc: '杨帅',
        dddd: '田慕雨', eeee: '5600', ffff: '1754',
        gggg: '20', hhhh: '1730', iiii: '20', jjjj: '1780', kkkk: '35', llll: '14', mmmm: '120',
      }, {
        aaaa: '2023-07', bbbb: '无锡分公司2', cccc: '高凤建',
        dddd: '田慕雨', eeee: '4500', ffff: '1020',
        gggg: '17', hhhh: '1820', iiii: '20', jjjj: '1870', kkkk: '14', llll: '100', mmmm: '120',
      },],
      total: 4,
    }
  },
  created() { this.getAllOrganization() },
  methods: {
    getList() { },
    // 获取续期专员机构下拉框信息
    getAllOrganization() {
      // this.api.selectUerList().then(res => {
      //   if (res.code == 200 && res.data != null) {
      //     this.organizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.organizationList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
  }
}
</script>